<template>
    <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate">
        <FormItem :label="item.label" :prop="key" v-for="(item,key) in data" :key="key">
            <Input
                v-if="item.component === 'Input'"
                v-model="formValidate[key]"
                :placeholder="getData(item,'placeholder')"
                v-bind="item.props"
                v-on="item.on"
            ></Input>
            <InputNumber
                v-if="item.component === 'InputNumber'"
                v-model="formValidate[key]"
                :placeholder="getData(item,'placeholder')"
                style="width:100%"
                v-bind="item.props"
                v-on="item.on"
            ></InputNumber>
            <Select filterable 
                v-if="item.component === 'Select'" 
                v-model="formValidate[key]" 
                filterable 
                :placeholder="getData(item,'placeholder')" 
                v-bind="item.props"
                v-on="item.on">
                <Option
                    v-for="option in getData(item,'options')"
                    :value="option.value"
                    :key="option.value"
                    >{{ option.label }}</Option
                >
            </Select>
            <RadioGroup 
                v-if="item.component === 'RadioGroup'" 
                v-model="formValidate[key]" 
                v-bind="item.props"
                v-on="item.on">
                <Radio :label="option.value" v-for="option in getData(item,'options')" :key="option.value">
                    {{option.label}}
                </Radio>
            </RadioGroup>
            <quillEditor 
                v-if="item.component === 'QuillEditor'"
                ref="myQuillEditor" 
                v-model="formValidate[key]">
            </quillEditor>
            <ItemUpload
                ref="logoUpload"
                v-if="item.component === 'ItemUpload'"
                :filePath.sync="formValidate[key]"
                :format="['jpg', 'png', 'jpeg']"
                type="images"
            ></ItemUpload>
            <FormDatepicker 
                v-if="item.component === 'FormDatepicker'"
                v-model="formValidate[key]" 
                :placeholder="getData(item,'placeholder')"
                style="width:100%">
            </FormDatepicker>
            <slot v-if="item.slot" :name="item.slot" :formValidate="formValidate"/>
        </FormItem>
    </Form>
</template>
<script>
    import ItemUpload from '@/components/item-upload/single.vue';
    import QuillEditor from '@/components/quillEditor';
    import FormDatepicker from '@/components/common/form-datepicker'
    export default {
        name:'DataForm',
        components:{ItemUpload,QuillEditor,FormDatepicker},
        props:{
            data:{
                type:Object,
                default:() => {}
            },
            labelWidth:{
                type:[Number,String],
                default:80
            }
        },
        data(){
            return {
                cData:this.data,
                formValidate:{},
                ruleValidate:{}
            }
        },
        watch:{
            data:{
                handler(newVal){
                    this.cData = newVal;
                    this.init()
                },
                deep:true
            }
        },
        created(){
            this.init()
        },
        computed:{
            
        },
        methods:{
            init(){
                for (let key in this.cData) {
                    let { rule, component, label} = this.cData[key]
                    this.$set(this.formValidate,key,this.cData[key].value)
                    if(rule){
                        let {required = false, validator, type='string' } = rule
                        let message = rule.message || this.getPlaceholder(this.cData[key])
                        let trigger = (component === 'Input' || component === 'InputNumber') ? 'blur' : 'change'
                        let rules = [];
                        rules.push({
                            required,
                            message,
                            type:type,
                            trigger
                        })
                        validator && rules.push({
                            validator,
                            trigger
                        })
                        this.$set(this.ruleValidate,key,rules)
                    }
                }
                this._formValidate = {...this.formValidate};
            },
            resetFields(){
                this.$refs.formValidate.resetFields()
            },
            getData(item,key){
                return typeof item[key] === 'function' ? item[key]() : key === 'placeholder' ? this.getPlaceholder(item) : item[key]
            },
            getPlaceholder(item){
                let pre = '';
                if(['InputNumber','Input'].includes(item.component)){
                    pre = '请输入'
                }else if(['FormDatepicker','Select'].includes(item.component)){
                    pre = '请选择'
                }
                return item.placeholder || `${pre}${item.label}`
            },
            validate(callback){
                this.$refs.formValidate.validate(valid => {
                    if(valid){
                        callback(this.formValidate)
                    }else{
                        callback(false)
                    }
                })
            }
        }
    }
</script>
<style scoped>

</style>